<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>List lite</h2>

    <div class="clearfix">
        <div class="demo-1 live-demo live-demo-block">
            <h3>单选</h3>
            <j-list-lite width="200" [data]="goodsList" labelField="name"
                         (selectedItemsChange)="handleSelect($event, 'selectedItems1', 'name')"></j-list-lite>
            <p class="message">选中的条目是: <span>{{selectedItems1}}</span></p>
        </div>
        <div class="demo-2 live-demo live-demo-block">
            <h3>多选</h3>
            <j-list-lite width="200" [data]="goodsList" labelField="name"
                         (selectedItemsChange)="handleSelect($event, 'selectedItems2', 'name')" [multipleSelect]="true"></j-list-lite>
            <p class="message">选中的条目是: <span>{{selectedItems2}}</span></p>
        </div>
    </div>

    <div class="clearfix">
        <div class="demo-3 live-demo live-demo-block">
            <h3>异步数据</h3>
            <j-list-lite width="200" [data]="countryList" labelField="enName"
                         (selectedItemsChange)="handleSelect($event, 'selectedItems3', 'enName')"></j-list-lite>
            <p class="message">选中的条目是: <span>{{selectedItems3}}</span></p>
        </div>

        <div class="demo-4 live-demo live-demo-block">
            <h3>字符串数组</h3>
            <j-list-lite width="200" [data]="goodsArrayList"
                         (selectedItemsChange)="handleSelect($event, 'selectedItems4')"></j-list-lite>
            <p class="message">选中的条目是: <span>{{selectedItems4}}</span></p>
        </div>
    </div>
</div>

